import React, { useContext, useState } from 'react';
import MyContext from '@/store/MyContext'

export default function Todo() {
  const context = useContext(MyContext);
  console.log(context)
  const [txt, setTxt] = useState('');

  const lis = context.todoList.map(item => <li key={item.id}>{item.text}<button onClick={() => context.dispatch({
    type: 'DEL',
    id: item.id
  })}>删除</button></li>)

  const onAddTodo = () => {
    const todo = {
      id: Date.now(),
      text: txt
    }
    context.dispatch({
      type: 'ADD',
      todo
    })
    setTxt('');
    // context.setTodoList([...context.todoList, todo])
  }
  const onDelTodo = (id) => {
    const newTodoList = context.todoList.filter()
    // context.setTodoList(newTodoList)
  }
  return (
    <div>
      <h3>Todo</h3>
      {/* <MyContext.Consumer>
        {
          (value) => {
            return <p>{value.msg}</p>
          }
        }
      </MyContext.Consumer> */}
      <div>{context.msg}</div>
      <button onClick={() => context.setMsg('context')}>修改msg</button>
      <p>
        <input type="text" value={txt} onChange={(e) => setTxt(e.target.value)} />
        <button onClick={onAddTodo}>添加</button>
      </p>

      <ul>
        {lis}
      </ul>
    </div>
  )
}
